<template>
    <div class="form">
      <!-- ref:获取这个表单el-form组件元素的标识(id) -->
      <!-- model：表单绑定的数据对象 - ruleForm -->
      <!-- rules：表单验证规则的配置 - rules -->
      <!-- label-width: 标签的长度 - auto长度自适应-->
      <!-- size:组件的尺寸 - formSize -->
      <!-- status-icon 校验结果反馈的图标 -->
        <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    :size="formSize"
    status-icon
  >
  <!-- 表单的每一项 -->
  <!-- prop：在做表单检验和表单重置时起作用，必须得有,取值是model绑定数据的键名 -->
    <el-form-item label="用户名" prop="name">
      <!-- 输入框组件，数据双向绑定到model绑定的数据键值 -->
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="选择地区" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择地区">
        <el-option label="上海" value="shanghai" />
        <el-option label="北京" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="数字" prop="count">
      <!-- options：绑定下拉框选项的数据 -->
      <el-select-v2
        v-model="ruleForm.count"
        placeholder="请选择一个数字"
        :options="options"
      />
    </el-form-item>
    <el-form-item label="日期时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <!-- 时间组件 -->
          <el-time-picker
            v-model="ruleForm.date2"
            label="Pick a time"
            placeholder="请选择一个时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="开关" prop="delivery">
      <!-- 开关组件  -->
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="多选框" prop="type">
      <!-- 多选框组 -->
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="性别" prop="resource">
      <!-- 单选按钮组 -->
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="A">男</el-radio>
        <el-radio value="B">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注" prop="desc">
      <!-- 文本域组件 -->
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

//表单绑定数据的接口类型
interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}
//表单组件的尺寸
const formSize = ref('large')
//获取表单组件元素的标识 FormInstance - 表单元素的类型
const ruleFormRef = ref<FormInstance>()
//定义表单绑定数据的类型 RuleForm - 接口类型http://127.0.0.1:5173/
const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
  //表单验证规则配置 FormRules - 表单验证规则的类型
const rules = reactive<FormRules<RuleForm>>({
  //用户名的验证规则
  //requires :true- 开启验证（必填项） false -关闭验证（是否显示标签前面的红色*号）
  //message:验证不通过的提示信息
  //trigger：验证规则触发的时机 - blur：光标离开触发
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '请输入3-5个字符长度', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: '请选择一个地区',
      trigger: 'change',//change：下拉框改变时触发验证规则
    },
  ],
  count: [
    {
      required: true,
      message: '请输入一个数字',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',//日期类型
      required: true,
      message: '请选择一个日期',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请选择一个时间',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',//数组类型
      required: true,
      message: '请选择一个类型',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: '请输入备注信息提示', trigger: 'blur' },
  ],
})
//点击表单提交按钮（Create）把ruleFormRef表单组件传下来
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return //如果表单元素不存在，那么则直接return不做任何操作
  //如果存在则做表单验证formEl.validate
  //valid:true - 验证通过 false - 未通过
  //fields：验证失败的原因
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log("成功：",ruleForm);
      //发送ajax请求到后台服务器添加数据到数据库
    } else {
      console.log('error submit!', fields)
    }
  })
}
//点击重置按钮，初始化表单的内容
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //调用表单组件的重置方法resetFields
  formEl.resetFields()
};
//绑定的下拉框选项的数据
const options = ref([
  {
    label:"数字1",
    value:1
  },
  {
    label:"数字2",
    value:2 
  }
])
</script>

<style lang="less" scoped>

</style>